<template>
  <van-nav-bar title="标题" left-text="返回" left-arrow @click="$router.push('/home')">
    <template #right>
      <van-icon name="search" size="18" color="black"/>
    </template>
  </van-nav-bar>
  <div class="query">
          <!-- <p>{{item}}</p> -->
          <van-sidebar v-model="active" style="width:100%;text-align:center">
            <van-sidebar-item title="热门推荐"/>
            <van-sidebar-item title="面部轮廓"/>
            <van-sidebar-item title="抗衰老"/>
            <van-sidebar-item title="牙齿矫正"/>
            <van-sidebar-item title="玻尿酸"/>
            <van-sidebar-item title="眼部整形"/>
            <van-sidebar-item title="鼻部整形"/>
            <van-sidebar-item title="面部轮廓"/>
            <van-sidebar-item title="毛发移植"/>
            <van-sidebar-item title="整形美体"/>
            <van-sidebar-item title="脂肪填充"/>
            <van-sidebar-item title="按摩"/>
            <van-sidebar-item title="正骨"/>
            <van-sidebar-item title="口唇整形"/>
            <van-sidebar-item title="其它"/>
          </van-sidebar>
        </div>
        <div class="arr">
          <template v-for="item in dan">
            <div :key="item" v-if="active==item">
              <div >补水保湿</div>
              <div class="sun">
                <div v-for="item in water" :key="item.id" @click="$router.push('/searchpage/searchresult')">{{item.name}}</div>
              </div>
              <div style="margin-top:15%">补水保湿</div>
              <div class="sun">
                <div v-for="item in water" :key="item.id" @click="$router.push('/searchpage/searchresult')">{{item.name}}</div>
              </div>
              <div style="margin-top:15%">补水保湿</div>
              <div class="sun">
                <div v-for="item in water" :key="item.id" @click="$router.push('/searchpage/searchresult')">{{item.name}}</div>
              </div>
            </div>
          </template>
          <!-- ---------------------------------------- -->
          <template v-for="item in double">
            <div :key="item" v-if="active==item">
              <div >双眼皮</div>
              <div class="sun">
                <div v-for="item in eyes" :key="item.id" @click="$router.push('/searchpage/searchresult')">{{item.name}}</div>
              </div>
              <div style="margin-top:15%">双眼皮</div>
              <div class="sun">
                <div v-for="item in eyes" :key="item.id" @click="$router.push('/searchpage/searchresult')">{{item.name}}</div>
              </div>
              <div style="margin-top:15%">双眼皮</div>
              <div class="sun">
                <div v-for="item in eyes" :key="item.id" @click="$router.push('/searchpage/searchresult')">{{item.name}}</div>
              </div>
            </div>
          </template>
        </div>  
</template>

<script lang="ts" setup>
  import {ref} from 'vue'
      let num=ref(0)
      let dan=ref([0,2,4,6,8,10,12,14])
      let double=ref([1,3,5,7,9,11,13,15])
      let activeIndex = ref(0);
      // let cates=ref([
      //   '热门推荐','面部轮廓','抗衰老','牙齿矫正','玻尿酸','眼部整形',
      //   '鼻部整形','面部轮廓','毛发移植','整形美体','脂肪填充','按摩',
      //   '正骨','口唇整形','其它',
      // ]);
      let water=ref([
        {id:1,name:'水光针'},
        {id:2,name:'水光针'},
        {id:3,name:'水光针'},
        {id:4,name:'水光针'},
        {id:5,name:'水光针'},
        {id:6,name:'水光针'},
        {id:7,name:'水光针'},
        {id:8,name:'水光针'},
        {id:9,name:'水光针'},
      ]);
      let eyes=ref([
        {id:1,name:'开内眼角'},
        {id:2,name:'开内眼角'},
        {id:3,name:'开内眼角'},
        {id:4,name:'开内眼角'},
        {id:5,name:'开内眼角'},
        {id:6,name:'开内眼角'},
        {id:7,name:'开内眼角'},
        {id:8,name:'开内眼角'},
        {id:9,name:'开内眼角'},
      ]);
      let active=ref(0)
</script>

<style>
  .sun div{
      display: inline-block;
      width: 26%;
      height: 30px;
      line-height: 30px;
      text-align: center;
      background:#faf8f6;
      margin-top: 20px;
    }
    .arr .sun{
      width:100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      margin-top: 10px;
    }
    .arr{
      width: 74%;
      height: 400px;
      position: absolute;top: 10%;right: 0;
      text-indent: 8%;
    }
    .query{
      width: 25%;
      background:#faf8f6;
    }
    .query p{
      width: 100%;
      height: 40px;
      line-height: 40px;
      text-align: center;
    }
  .top{
    width:100%;
    height:10%;
    background: red;
  }
</style>